<!--
 * @Author: your name
 * @Date: 2020-07-02 10:19:18
 * @LastEditTime: 2020-07-07 11:15:28
 * @LastEditors: Please set LastEditors
 * @Description:搜索页面
 * @FilePath: \JKShopping\jkshopping\src\pages\home\components\searchPage\searchPage.vue
--> 
<template>
  <div class="searchPage">
    <van-search show-action placeholder="按回车搜索" @search="search">
      <template #action>
        <div @click="goback">返回</div>
      </template>
    </van-search>

    <div class="hotSearch">
      <h1>热门搜索</h1>
      <div class="keywords">
        <p v-for="item of datas" :key="item.id">{{item.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/goods/goods.js";
export default {
  data() {
    return {
      datas: [],
      datas2: [],
      keywords:''
    };
  },
  methods: {
    goback() {
      //返回
      this.$router.back();
    },
    search(){//回车后跳转
      this.$router.push({ path: '/searchResult' })
    },
    
    // async API_goods() {//当前热销
    //   let params = {
    //     order: "sort",
    //     sort: "desc"
    //   };
    //   return await api.goods(params);
    // },

    // search(keywords) { //搜索
    //   var newList = [];
    //   // 创建新的数组newList
    //   this.datas2.forEach(item => {
    //     // 如果indexOf为-1，则说明关键字不存在该字符串中，
    //     // 反之，存在或者keywords为空字符串
    //     if (item.goods_name.indexOf(keywords) != -1) {
    //       //如果包含keywords，增加到数组中，渲染到页面
    //       newList.push(item);
    //     }
    //   });
    //   return newList;
    // },

    async API_keywords() {
      //热门搜索
      return await api.keywords();
    }
  },

  async created() {
    let res = await this.API_keywords();
    // console.log(res.data.data)
    if (res.data.code === 200) {
      this.datas = res.data.data;
    }

    // let res2 = await this.API_goods();
    // //当前热销
    // if (res2.data.code === 200) {
    //   this.datas2 = res2.data.data.data;
    // }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/home/searchPage.scss";
</style>